<!--
 * @Description: 汇聚配置
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-06-10 14:30:11
 * @LastEditTime: 2021-11-10 15:08:02
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <div class="mixed-options">
    <template v-if="status === 0">
      <div class="page-content">
        <table-bar :showTop="false" :columns="columns" @changeColumn="changeColumn">
          <div slot="top">
            <el-form :model="filterSearch" :label-width="labelWidth" label-position="right">
              <el-row :gutter="20">
                <el-col :xs="24" :sm="12" :lg="6">
                  <!-- 网元名称 -->
                  <el-form-item label="网元名称">
                    <el-input v-model.trim="filterSearch.keyword" placeholder="名称"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="6">
                  <!-- 租户名称 -->
                  <el-form-item label="租户名称">
                    <el-input v-model.trim="filterSearch.dgName" placeholder="名称"></el-input>
                  </el-form-item>
                </el-col>
                <!-- 搜索 重置 -->
                <el-row :xs="24" :sm="12" :lg="6" style="float: right; margin-right: 10px;">
                  <el-button type="primary" @click="search">搜索</el-button>
                  <el-button @click="reset">重置</el-button>
                </el-row>
              </el-row>
            </el-form>
          </div>
        </table-bar>
        <tao-table
          class="table-box"
          :data="dataList"
          :page="page"
          @changePage="changePage"
          :showPage="true"
          ref="table"
        >
          <!-- ID -->
          <el-table-column v-if="columns[0].show" align="center" width="100" label="ID" prop="id" />
          <!-- 名称 -->
          <el-table-column
            v-if="columns[1].show"
            label="名称"
            min-width="200"
            show-overflow-tooltip
            prop="userlabel"
          />
          <el-table-column
            label="型号"
            align="center"
            width="100"
            sortable
            show-overflow-tooltip
            prop="subType"
            v-if="columns[2].show"
          >
            <template slot-scope="scope">{{scope.row.subType | filterType}}</template>
          </el-table-column>
          <el-table-column
            label="软件SN"
            align="center"
            width="180"
            prop="esn"
            v-if="columns[3].show"
          >
            <template slot-scope="scope">{{scope.row.extAttrs.esn | filterSN}}</template>
          </el-table-column>
          <el-table-column
            label="MAC地址"
            align="center"
            width="180"
            prop="mac"
            v-if="columns[4].show"
          >
            <template slot-scope="scope">{{scope.row.extAttrs.allMac}}</template>
          </el-table-column>
          <el-table-column
            label="IP"
            align="center"
            width="180"
            prop="ipAddress"
            v-if="columns[5].show"
          />
          <el-table-column
            label="状态"
            align="center"
            width="100"
            prop="operResult"
            v-if="columns[6].show"
          >
            <template slot-scope="scope">
              <div v-show="scope.row.managementState === 'ONLINE'">
                <span v-if="scope.row.connectionState === 'CONNECTED'">
                  <i class="i-success"></i>
                  链接
                </span>
                <span v-if="scope.row.connectionState === 'DISCONNECTED'">
                  <i class="i-error"></i>
                  断链
                </span>
              </div>
              <span v-show="scope.row.connectionState === 'UNKNOWN'">
                <i class="i-warning"></i>
                未知
              </span>
            </template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column fixed="right" label="操作" align="center" width="320px">
            <!-- 配置  Shell-->
            <template slot-scope="scope">
              <el-button
                type="text"
                icon="el-icon-setting"
                style="color: #67C23A"
                @click="options(scope.row)"
              >配置</el-button>
              <el-button
                type="text"
                @click="openShell(scope.row)"
                v-power="scope.row.dgId === 100000 ? 0 : 2"
              >
                <i class="iconfont">&#xe680;</i> Shell
              </el-button>
              <el-button
                type="text"
                icon="el-icon-refresh"
                style="color: #E6A23C"
                @click="reboot(scope.row)"
                v-power="scope.row.dgId === 100000 ? 0 : 2"
              >重启</el-button>
              <el-button
                type="text"
                icon="el-icon-tickets"
                style="color: #909399;"
                @click="handleLog(scope.row)"
              >24小时日志</el-button>
            </template>
          </el-table-column>
        </tao-table>
      </div>
    </template>
    <template v-if="status === 1">
      <div class="page-content">
        <shell :data="shellNe" :type="type" @handleChange="handleChange($event)" />
      </div>
    </template>
    <template v-if="status === 2">
      <div class="page-content">
        <hours :dataList="hoursLogs" @handleChange="handleChange($event)" />
      </div>
    </template>
    <template v-if="status === 3">
      <options :ne="ne" @handleChange="handleChange($event)" />
    </template>
  </div>
</template>

<script>
// 引入终端
import shell from '../shell/';
// 引入24小时日志
import hours from '../24hours';
// 引入高级配置项
import options from '../options';

export default {
  components: {
    shell,
    hours,
    options
  },
  created () {
    let neId = JSON.parse(sessionStorage.getItem('jump')).neId;
    if (neId) {
      let _this = this;
      let data = {
        id: neId,
        connectionState: 'CONNECTED',
        managementState: 'ONLINE'
      };
      _this.options(data);
    }
  },
  data () {
    return {
      page: {
        page: 1,
        pageSize: 15,
        total: 0
      },
      dataList: [],
      filterSearch: {
        keyword: null,
        dgName: null
      },
      columns: [
        { name: 'ID', show: true },
        { name: '名称', show: true },
        { name: '型号', show: true },
        { name: '软件SN', show: true },
        { name: 'MAC地址', show: true },
        { name: 'IP', show: true },
        { name: '状态', show: true }
      ],
      status: 0,
      shellNe: {},
      type: 'POP',
      hoursLogs: [],
      ne: {}
    };
  },
  filters: {
    filerTime (val) {
      if (val) {
        let year = val.substring(val.lastIndexOf('-') + 1, val.length - 2);
        let month = val.substring(10, val.indexOf('-'));
        let day = val.substring(val.indexOf('-') + 1, val.lastIndexOf('-'));
        let time = val.substring(0, 9);
        return year + '-' + month + '-' + day + time;
      } else {
        return val;
      }
    },
    filerLine (val) {
      if (val.indexOf('/---') > -1) {
        let line = val.substring(5, val.length - 5);
        return line;
      } else {
        return val;
      }
    },
    filterType (val) {
      val = val.replace('_', ' ');
      return val;
    }
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.refresh();
    });
  },
  computed: {
    labelWidth () {
      let currentLang = this.$i18n.locale;
      let temp = 80;
      if (currentLang === 'cn') {
        temp = 80;
      } else {
        temp = 120;
      }
      return temp + 'px';
    }
  },
  methods: {
    // 配置
    options (data) {
      let _this = this;
      // 判断网元状态是否断链
      if (data.connectionState === 'CONNECTED' && data.managementState === 'ONLINE') {
        _this.$http.get({
          url: '/api/sdwan/ne/queryNeById/' + data.id
        }).then(res => {
          let { status, resultBody } = res;
          if (status === '0') {
            _this.ne = resultBody;
            _this.status = 3;
          }
        });
      } else {
        this.$message.error('网元状态异常！');
      }
    },
    // 回调
    handleChange (val) {
      let _this = this;
      _this.status = val;
    },
    // 重启设备
    reboot (data) {
      let _this = this;
      _this.$confirm('您确定要重启当前设备吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          commandCode: 'reload.system',
          paras: {
            neType: data.type
          }
        };
        _this.$http.post({
          url: '/api/resource/nemng/command/' + data.id,
          data: params
        }).then(res => {
          _this.$message.success('重启成功');
        });
      }).catch(() => {
        _this.$message.info('取消重启');
      });
    },
    // 24小时日志
    handleLog (data) {
      let _this = this;
      let params = {
        commandCode: 'cmdlog.get',
        paras: null
      };
      _this.$http.post({
        url: '/api/resource/nemng/command/' + data.id,
        data: params
      }).then(res => {
        let arry = [];
        for (let i = 0; i < res.length; i++) {
          arry.push({
            start: _this.$options.filters['filerTime'](res[i].body.substring(res[i].body.indexOf('StartTime:') + 10, res[i].body.indexOf('EndTime:'))),
            end: _this.$options.filters['filerTime'](res[i].body.substring(res[i].body.indexOf('EndTime:') + 8, res[i].body.indexOf('FlowID:'))),
            vtyno: res[i].body.substring(res[i].body.indexOf('VtyNo:') + 6, res[i].body.indexOf('UserName:')),
            username: res[i].body.substring(res[i].body.indexOf('UserName:') + 9, res[i].body.indexOf('UserLevel:')),
            ip: res[i].body.substring(res[i].body.indexOf('IP:') + 3, res[i].body.indexOf('HostName:')),
            hostname: res[i].body.substring(res[i].body.indexOf('HostName:') + 9, res[i].body.indexOf('Result:')),
            result: res[i].body.substring(res[i].body.indexOf('Result:') + 7, res[i].body.indexOf('CMDLevel:')),
            cmd: _this.$options.filters['filerLine'](res[i].body.substring(res[i].body.indexOf('CMDLine:') + 8, res[i].body.length))
          });
        }
        _this.hoursLogs = arry;
        _this.status = 2;
      });
    },
    // 终端工具
    openShell (data) {
      let _this = this;
      _this.status = 1;
      _this.shellNe = data;
    },
    // 搜索
    search () {
      let _this = this;
      _this.page.page = 1;
      _this.refresh();
    },
    // 重置
    reset () {
      let _this = this;
      _this.page.page = 1;
      _this.filterSearch = {
        dgName: null,
        keyword: null
      };
      _this.refresh();
    },
    // 刷新
    refresh () {
      let _this = this;
      let params = {
        // 租户名称
        dgName: _this.filterSearch.dgName,
        // 网元名称
        keyword: _this.filterSearch.keyword,
        // 网元类型
        neLayer: 'Mixed',
        siteOperationStatus: [3, 6],
        pageNum: _this.page.pageSize,
        pageSize: (_this.page.page - 1) * _this.page.pageSize
      };
      _this.$http.post({
        url: '/api/sdwan/ne/queryWithSiteStautus',
        data: params
      }).then(res => {
        let { resultBody } = res;
        _this.page.total = resultBody.count;
        _this.dataList = resultBody.objects;
      });
    },
    // 过滤显示字段
    changeColumn (columns) {
      this.columns = columns;
      this.$refs.table.doLayout();
    },
    // 切换页码 & 显示条数
    changePage (page) {
      if (page.page) {
        this.page.page = page.page;
      } else {
        this.page.page = 1;
        this.page.pageSize = page.limit;
      }
      this.refresh();
    }
  }
};
</script>

<style lang='scss' scoped>
.i-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #e8eaec;
  position: relative;
  top: 1px;
}
.i-success {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #19be6b;
  position: relative;
  top: 1px;
}
.i-error {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #ed4014;
  position: relative;
  top: 1px;
}
.i-warning {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #f90;
  position: relative;
  top: 1px;
}
.page-content {
  width: 100%;
  height: 100%;

  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .table-box {
    ::v-deep .el-button {
      padding: 0;
    }
  }
}
</style>